<template>
	<div class="app-container">
		<yd-form class="yd-form-wraper" :options="formOptions" :model="formData" @form-init="formInited">
			<template #form-footer>
				<div class="yd-flex1">
					<el-form-item label="开始日期" style="margin-bottom: 0">
						<el-date-picker v-model="formData.time" :editable="false" :clearable="false" value-format="YYYY-MM-DD" class="yd-form-item">
						</el-date-picker>
					</el-form-item>
					<el-button type="primary" icon="Search" @click="searchHandler">查 询</el-button>
					<el-button type="primary" @click="downloadHandler">下 载</el-button>
				</div>
			</template>
		</yd-form>

		<!-- 长流程业务回溯列表 -->

		<YdCard>
			<!-- 概况列表 -->
			<YdTable
				:formData="formData"
				:tableConfig="overViewTableConfig"
				:tableData="overViewTableData.data"
				@sizeChangeHandler="searchHandler"
				@currentChangeHandler="searchHandler"
				@sortChangeHandler="searchHandler"
				@expandRowHandler="expandRowHandler"
			>
				<!-- 详情列表 -->
				<template #expand="props">
					<YdTable
						:formData="formData"
						:tableConfig="detailTableConfig"
						:tableData="detailTableData[props.data.sysProcessId as string].data"
						@sortChangeHandler="searchDetailHandler"
					></YdTable>
				</template>
			</YdTable>
		</YdCard>
	</div>
</template>

<script setup name="LongProcessQuery" lang="tsx">
import { ref, reactive, getCurrentInstance } from 'vue';
import { overviewList, detailList, exportExcel } from '@/api/bpm/business/long_process';
import { downloadFromBlob, parseTime } from '@/utils/common';
const instance = getCurrentInstance();
const proxy = instance?.proxy;

//   let date
let tempSysProcessId = ref('');

const formOptions = ref<FormOptionType>([
	{
		type: 'select',
		prop: 'systemId',
		label: '业务系统',
		api: {
			name: 'queryAppSystemOptions',
			params: { isStatus: 1 },
		},
	},
	{
		type: 'input',
		prop: 'sysProcessId',
		label: '业务流转号',
	},
	{
		type: 'input',
		prop: 'opIdCode',
		label: '操作员',
	},

	// {
	// 	type: 'date-picker',
	// 	prop: 'time',
	// 	span: 8,
	// 	dateType: 'date',
	// 	label: '时间范围',
	// 	enableCrossDay: true,
	// },
]);

// 搜索表单数据
let formData = reactive<FormModelType>({
	time: defaultTime(),
	pageSize: 10,
	pageNum: 1,
	orderByColumn: 'startTime',
	isAsc: 'desc',
});
// 长流程业务概况列表配置
let overViewTableConfig = reactive<TableConfigType>({
	columns: [
		{
			label: '流转号',
			prop: 'sysProcessId',
		},
		{
			label: '开始时间',
			prop: 'startTime',
		},
		{
			label: '节点名称',
			prop: 'sysNodeName',
			formatter(row: any, value: string) {
				return value || '- -';
			},
		},
	],
	pagination: {
		pageNum: 1,
	},
	loading: true,
	expand: true,
	noStripe: true,
	rowClick: true,
});
// 长流程业务详情列表配置
let detailTableConfig = reactive<TableConfigType>({
	columns: [
		{
			label: '业务名称',
			prop: 'businessName',
			width: 200,
		},
		{
			label: '开始时间',
			prop: 'startTime',
			sortable: true,
			width: 160,
		},
		{
			label: '结束时间',
			prop: 'endTime',
			sortable: true,
			width: 160,
		},
		{
			label: '业务状态',
			prop: 'dealState',
			width: 80,
			renderXss: (row, val) => {
				if (val === 1) {
					return <span style="color: #0ae7b7;">成功</span>;
				}
				return <span style="color: #f43813;">失败</span>;
			},
			/*formatter(row, val) {
                  if (val === 1) {
                    return '<span style="color: #0ae7b7;">成功</span>';
                  }
                  return '<span style="color: #f43813;">失败</span>';
                }*/
		},
		{
			label: '业务详情',
			prop: 'exclusiveIndicator',
		},
		{
			label: '操作',
			prop: '',
			width: 100,
			operation: [
				{
					text: '详情',
					handler: (scope) => {
						proxy?.$router.push({
							path: '/business-monitor/monitor-query/business-list-detail',
							query: {
								businessDetailId: scope.row.businessDetailId,
								startTime: scope.row.startTime,
								startTimeUsec: scope.row.startTimeUsec,
								endTime: scope.row.endTime,
								endTimeUsec: scope.row.endTimeUsec,
							},
						});
					},
				},
			],
		},
	],
	pagination: {
		pageNum: 1,
	},
	loading: true,
});
// 长流程业务概况列表数据
let overViewTableData = reactive({
	data: [],
});
// 长流程业务详情列表数据
let detailTableData = reactive<anyObj>({});
// 下载状态
let downloading = ref(false);
let downloadStartTime = ref('');
let downloadEndTime = ref('');

// 默认时间
function defaultTime() {
	// 默认选择当月第一天
	const date = new Date();
	date.setDate(1);
	return parseTime(date, '{y}-{m}-{d} 00:00:00');
}
// 表单初始化完毕
function formInited() {
	searchHandler();
}
// 搜索
function searchHandler(btnFlag?: any) {
	if (btnFlag) {
		// 重置页数
		formData.pageNum = 1;
	}
	overViewTableConfig.loading = true;
	downloadStartTime.value = formData.startTime;
	downloadEndTime.value = formData.endTime;
	overviewList(formData).then((res: ApiResponse) => {
		overViewTableConfig.loading = false;
		if (res.code !== 0) {
			return;
		}
		overViewTableData.data = res.data.data;
		overViewTableConfig.pagination!.total = res.data.toal;
		overViewTableData.data.forEach((ov: any) => {
			if (!detailTableData[ov.sysProcessId]) {
				detailTableData[ov.sysProcessId] = {
					data: [],
					total: 0,
				};
			}
		});
	});
}
// 展开行查询详情列表
function expandRowHandler(row: any) {
	console.log('expandRowHandler', row);
	tempSysProcessId.value = row.sysProcessId;
	searchDetailHandler();
}
function searchDetailHandler() {
	detailTableConfig.loading = true;
	detailList({
		sysProcessId: tempSysProcessId.value,
		orderByColumn: formData.orderByColumn,
		isAsc: formData.isAsc,
	}).then((res) => {
		detailTableConfig.loading = false;
		if (res.code !== 0) {
			return;
		}

		detailTableData[tempSysProcessId.value].data = res.data;
		detailTableData[tempSysProcessId.value].total = 0;
	});
}
// 下载
function downloadHandler() {
	const d = JSON.parse(JSON.stringify(formData));
	d.pageNum = undefined;
	d.pageSize = undefined;

	d.startTime = downloadStartTime.value;
	d.endTime = downloadEndTime.value;
	downloading.value = true;
	exportExcel(d).then((res) => {
		downloading.value = false;
		downloadFromBlob(res, '长流程业务回溯列表').then((o) => {
			if (!o.flag) {
				proxy?.$message.warning(o.msg);
			}
		});
	});
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
:deep(.el-table__row > td) {
	border-bottom: 1px solid #56698d;
}
:deep(.el-table__expanded-cell) {
	border-bottom: 1px solid #56698d !important;
}
:deep(.expand-table-box) {
	border: none;
	.el-table__row > td {
		border: none;
	}
}
.style-split-yd-card {
	:deep(.el-card) {
		background-color: rgba(29, 39, 75, 0.31);
		border: unset;
		border-radius: 12px;
	}
}
</style>
